<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>My Favorites - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
    <style>
        .favorite-item {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            transition: transform 0.2s;
        }
        .favorite-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .favorite-item-pic {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 6px;
        }
        .remove-favorite {
            color: #dc3545;
            cursor: pointer;
        }
        .remove-favorite:hover {
            color: #c82333;
        }
    </style>
</head>
<body class="my-favorites">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Page Header-->
        <div class="page-header" th:style="|background-image: url(@{/assets/images/page-header/page-banner1.jpg})|">
            <div class="page-title"><h1>My Favorites</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs">
                        <a th:href="@{/}" title="Back to the home page"><i class="an an-home icon-home"></i></a>
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <a th:href="@{/user/my-account}">My Account</a>
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <span>My Favorites</span>
                    </div>
                </div>
            </div>
        </div>
        <!--End Page Header-->
        
        <div class="container">
            <div class="row">
                <!-- 侧边栏导航 -->
                <div class="col-xl-2 col-lg-2 col-md-12 md-margin-20px-bottom">
                    <ul class="nav flex-column dashboard-list" role="tablist">
                        <li><a class="nav-link" th:href="@{/user/my-account}">My Account</a></li>
                        <li><a class="nav-link" th:href="@{/user/my-account}">My Orders</a></li>
                        <li><a class="nav-link active" th:href="@{/user/my-favorites}">My Favorites</a></li>
                        <li><a class="nav-link" th:href="@{/user/my-addresses}">Addresses</a></li>
                        <li><a class="nav-link" th:href="@{/notifications}">Notifications</a></li>
                        <li><a class="nav-link" th:href="@{/personal-data}">Personal Data</a></li>
                        <li><a class="nav-link" href="#" onclick="logout()">Logout</a></li>
                    </ul>
                </div>

                <!-- 主要内容 -->
                <div class="col-xl-10 col-lg-10 col-md-12">
                    <div class="dashboard-content padding-30px-all md-padding-15px-all">
                        <div class="section-header style1 d-flex align-items-center justify-content-between mb-4">
                            <div class="section-header-left">
                                <h2>My Favorite Products</h2>
                                <p>Manage your favorite products and quick access to purchase them</p>
                            </div>
                            <div class="section-header-right">
                                <span class="badge bg-primary" th:text="|Total: ${favorites?.total ?: 0} items|">Total: 0 items</span>
                            </div>
                        </div>

                        <!-- 收藏商品列表 -->
                        <div th:if="${favorites != null and favorites.records != null and !favorites.records.isEmpty()}">
                            <div class="row">
                                <div class="col-12" th:each="favorite : ${favorites.records}">
                                    <div class="favorite-item">
                                        <div class="row align-items-center">
                                            <div class="col-md-2">
                                                <img src="/assets/images/product-images/default.jpg" 
                                                     class="favorite-item-pic" alt="Product Image">
                                            </div>
                                            <div class="col-md-6">
                                                <h5 class="mb-2">
                                                    <a th:href="@{/detail(id=${favorite.productId})}" 
                                                       class="text-decoration-none">Product ID: [[${favorite.productId}]]</a>
                                                </h5>
                                                <p class="text-muted mb-1">Click to view product details</p>
                                                <small class="text-muted" th:text="|Added on ${favorite.createdTime}|">Added on 2023-01-01</small>
                                            </div>
                                            <div class="col-md-2 text-center">
                                                <div class="price">
                                                    <span class="money">View Details</span>
                                                </div>
                                                <div class="text-info small">Click to view</div>
                                            </div>
                                            <div class="col-md-2 text-center">
                                                <div class="btn-group-vertical" role="group">
                                                    <button class="btn btn-outline-primary btn-sm mb-2" 
                                                            th:onclick="|addToCart(${favorite.productId})|">
                                                        <i class="an an-shopping-bag"></i> Add to Cart
                                                    </button>
                                                    <button class="btn btn-outline-danger btn-sm remove-favorite" 
                                                            th:onclick="|removeFavorite(${favorite.productId})|">
                                                        <i class="an an-times"></i> Remove
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 分页 -->
                            <div class="pagination-section mt-4" th:if="${favorites.total > favorites.size}">
                                <nav aria-label="Favorites pagination">
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item" th:classappend="${favorites.current <= 1} ? 'disabled'">
                                            <a class="page-link" th:href="@{/user/my-favorites(page=${favorites.current - 1})}">Previous</a>
                                        </li>
                                        <li class="page-item" th:each="pageNum : ${#numbers.sequence(1, favorites.pages)}"
                                            th:classappend="${pageNum == favorites.current} ? 'active'">
                                            <a class="page-link" th:href="@{/user/my-favorites(page=${pageNum})}" th:text="${pageNum}">1</a>
                                        </li>
                                        <li class="page-item" th:classappend="${favorites.current >= favorites.pages} ? 'disabled'">
                                            <a class="page-link" th:href="@{/user/my-favorites(page=${favorites.current + 1})}">Next</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>

                        <!-- 空状态 -->
                        <div th:if="${favorites == null or favorites.records == null or favorites.records.isEmpty()}" 
                             class="text-center py-5">
                            <i class="an an-heart" style="font-size: 4rem; color: #ddd;"></i>
                            <h4 class="mt-3">No Favorite Products Yet</h4>
                            <p class="text-muted">Start browsing and add products to your favorites!</p>
                            <a th:href="@{/goods}" class="btn btn-primary">Browse Products</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<div th:replace="~{include_header::footer}"></div>

<script th:src="@{/assets/js/vendor/jquery-3.6.0.min.js}"></script>
<script th:src="@{/assets/js/vendor/modernizr-3.6.0.min.js}"></script>
<script th:src="@{/assets/js/vendor/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/plugins.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script>
// 添加到购物车
function addToCart(productId) {
    $.post('/cart/add', {
        goodId: productId,
        qty: 1
    }).done(function(response) {
        if (response.success) {
            alert('Added to cart successfully!');
        } else {
            alert(response.message || 'Failed to add to cart');
        }
    }).fail(function() {
        alert('Network error, please try again');
    });
}

// 取消收藏
function removeFavorite(productId) {
    if (confirm('Are you sure you want to remove this item from favorites?')) {
        $.post('/favorite/remove', {
            productId: productId
        }).done(function(response) {
            if (response.success) {
                location.reload();
            } else {
                alert(response.message || 'Failed to remove favorite');
            }
        }).fail(function() {
            alert('Network error, please try again');
        });
    }
}

// 用户注销
function logout() {
    if (confirm('Are you sure you want to logout?')) {
        $.post('/user/logout').done(function() {
            window.location.href = '/';
        });
    }
}
</script>

</body>
</html> 